<template>
  <el-container>
    <el-header>
      <Logo :text="logoText" class="login_logo" />
      <div class="login_logo_span">
        <UserInfo />
      <User />
      </div>
    </el-header>
    <el-container>
      <el-aside width="240px"><AsideMenu /></el-aside>
      <div class="main">
        <template>
          <el-main>
            <GlobalContent/>
          </el-main>
        </template>
      </div>
    </el-container>
  </el-container>
</template>

<script>
// import CommonHeader from './CommonHeader.vue';
import Logo from "@/components/logo/Index.vue";
import User from "@/components/user/UserTab.vue";
import AsideMenu from "./AsideMenu.vue";
import { ref } from "vue";
import UserInfo from "@/views/manage/user/UserInfo";
import GlobalContent from '../../layouts/global/GlobalContent.vue'
import HelloWorld from "@/components/HelloWorld";

import { useRouter } from 'vue-router'

export default {
  components: {
    GlobalContent,
    Logo,
    User,
    AsideMenu,
    HelloWorld,
    UserInfo
  },
  setup(){
    const router = useRouter();
    console.log(router.currentRoute.value.fullPath);
    const logoText = ref("我找才教育");
    console.log("运行到此处")
    return {
      logoText
    }
  }
}
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #2f3952;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .login_logo_span {
    display: flex;
    height: 100%;
  }
}
.el-aside {
  background-color: #171e2e;
  color: #fff;
}
.el-aside,
.main {
  height: calc(100vh - 60px);
}

.login_logo {
  margin-left: 20px;
}
.main {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-basis: auto;
  width: calc(100% - 240px);
  overflow: auto;
  .el-main {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
  }
}
</style>
